<template>
	<view class="wrap wrap-gHeader">
		<view class="t-header app_gHeaderFixed">
			<g-header rtype="share">
				<template v-slot:title>
					<view class="search" @click="onSearchTap">
						<icon type="search" size="16"></icon>
						<view type="text" placeholder="搜索店内商品" placeholder-class="app_phc">搜索店内商品</view>
					</view>
				</template>
			</g-header>
		</view>
		<view class="store">
			<view class="store-logo">
				<image :src="gShopInfo.logoImg"></image>
			</view>
			<view class="store-M">
				<view class="store-MT">
					<view class="store-name">{{gShopInfo.name}}</view>
					<!-- <view class="store-location">广州店</view> -->
				</view>
				<view class="store-MB">
					<view class="store-level">
						<image v-for="(item,index) in 5" :key="index" src="../../static/images/icon-level2.png"
							style="width: 24rpx;height: 20rpx;"></image>
					</view>
					<view class="store-follow">{{gShopInfo.concernCount}}人关注</view>
				</view>
			</view>
			<view class="store-more app_arrow" @click="onSkipTap('storeInfoShow')">店铺详情</view>
		</view>
		<view class="banner">
			<u-swiper :list="gShopInfo.showImages" height="350"></u-swiper>
		</view>
		<u-waterfall v-model="list" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="warter warterLeft" v-for="(item, index) in leftList" :key="index"
					@click="onSkipTap('goodsDetail', item.id)">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.cover" :index="index"></u-lazy-load>
					<view class="warter-title">
						{{item.productName}}
					</view>
					<view class="warter-bottom app_flex-aicjcsb">
						<view class="warter-bottomL">
							<text>￥{{item.price}}</text>
							<text>/{{item.unit}}</text>
							<text>（{{item.emptyDiff}}）</text>
						</view>
						<view class="warter-bottomR">月销{{item.saleNum}}</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="warter warterRight" v-for="(item, index) in rightList" :key="index"
					@click="onSkipTap('goodsDetail', item.id)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.cover" :index="index"></u-lazy-load>
					<view class="warter-title">
						{{item.productName}}
					</view>
					<view class="warter-bottom app_flex-aicjcsb">
						<view class="warter-bottomL">
							<text>￥{{item.price}}</text>
							<text>/{{item.unit}}</text>
							<text>（{{item.emptyDiff}}）</text>
						</view>
						<view class="warter-bottomR">月销{{item.saleNum}}</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<view class="tabbar">
			<store-tabbar navindex="0"></store-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				flowList: [],
				list: [],
				totalPage: 1,
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false
			}
		},
		onLoad(options) {
			// this.addRandomData();
			this.updatePage()
		},
		onReachBottom() {
			this.page++
			this.getGoodsList()
		},
		methods: {
			updatePage() {
				this.getUserInfo()
				this.getGoodsList()
			},
			getUserInfo() {
				this.$store.dispatch('updateUserInfo')
			},
			onSkipTap(type, params) {
				const urlObj = {
					storeInfoShow: '/pages/shopInfo/storeInfoShow',
					goodsDetail: () => {
						uni.navigateTo({
							url: `/pages/shopInfo/goodsDetail?id=${params}`
						})
					},
					storeGoodsList: '/pages/shopInfo/storeGoodsList?focus=true'
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			onSearchTap() {
				this.onSkipTap('storeGoodsList')
			},
			// addRandomData() {
			// 	for (let i = 0; i < 10; i++) {
			// 		let index = this.$u.random(0, this.list.length - 1);
			// 		// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
			// 		let item = JSON.parse(JSON.stringify(this.list[index]))
			// 		item.id = this.$u.guid();
			// 		this.flowList.push(item);
			// 	}
			// },
			// remove(id) {
			// 	this.$refs.uWaterfall.remove(id);
			// },
			// clear() {
			// 	this.$refs.uWaterfall.clear();
			// },
			getGoodsList() {
				// if (this.page > this.totalPage) return
				// this.$g_api.productSearchProducts({
				// 	pageNum: this.page,
				// 	pageSize: this.size
				// }).then(({
				// 	rows,
				// 	totalPage
				// }) => {
				// 	console.log(rows);
				// 	this.totalPage = totalPage
				// 	this.hasLoad = true
				// 	if (rows?.length > 0) {
				// 		rows = this.$g_util.concatRequestUrl(rows, 'cover')
				// 		this.list = this.list.concat(rows)
				// 		// this.addRandomData()
				// 	} else {
				// 		this.noMore = true
				// 	}
				// })
				uni.showLoading()
				this.$g_api.shopSearchProduct({
						page: this.page,
						size: this.size,
						shopId: this.gShopInfo.id
					})
					.then(({
						data
					}) => {
						this.hasLoad = true
						if (data?.length > 0) {
							data = this.$g_util.concatRequestUrl(data, 'cover')
							this.list = this.list.concat(data)
							// this.addRandomData()
						} else {
							this.noMore = true
						}
					}).finally(() => {
						uni.hideLoading()
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-bottom: calc(20rpx + 100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + 100rpx + env(safe-area-inset-bottom));
	}

	.search {
		display: flex;
		align-items: center;
		margin-left: -14rpx;
		padding: 0 30rpx;
		width: 570rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #f2f2f2;

		view {
			flex: 1;
			margin-left: 14rpx;
			color: #ccc;
			font-size: 28rpx;
		}
	}

	.store {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
	}

	.store-logo {
		image {
			width: 90rpx;
			height: 90rpx;
			margin-right: 30rpx;
			border-radius: 10rpx;
			// background-color: #ccc;
		}
	}

	.store-M {
		flex: 1;
	}

	.store-MT {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.store-name {
		font-size: 30rpx;
		color: #333;
	}

	.store-location {
		display: inline-block;
		margin-left: 20rpx;
		padding: 6rpx 14rpx;
		line-height: 1;
		border-radius: 6rpx;
		font-size: 20rpx;
		color: #999;
		background-color: #f2f2f2;
	}

	.store-MB {
		display: flex;
		align-items: center;
	}

	.store-level {
		margin-right: 20rpx;

		image {
			margin-right: 4rpx;
		}
	}

	.store-follow {
		font-size: 22rpx;
		color: #999;
	}

	.store-more {
		font-size: 22rpx;
		color: #999;
	}

	.banner {
		margin-bottom: 20rpx;
		padding: 0 20rpx 30rpx;
		background-color: #fff;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		z-index: 99999;
	}

	.warter {
		border-radius: 8px;
		background-color: #ffffff;
		padding: 8px;
		margin-bottom: 20rpx;
		position: relative;
	}

	.warterLeft {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.warterRight {
		margin-right: 20rpx;
	}


	.water-image {
		width: 100%;
		border-radius: 4px;
	}

	.warter-title {
		font-size: 26rpx;
		color: #333;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		color: $u-main-color;
	}

	.warter-bottom {}

	.warter-bottomL {
		text {
			&:nth-child(1) {
				font-size: 26rpx;
				color: #FF4C4C;
			}

			&:nth-child(2) {
				font-size: 18rpx;
				color: #FF4C4C;
			}

			&:nth-child(3) {
				font-size: 18rpx;
				color: #999;
			}
		}
	}

	.warter-bottomR {
		font-size: 18rpx;
		color: #999;
	}


	.water-tag {
		display: flex;
		margin-top: 5px;
	}

	.water-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.water-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.water-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.water-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
